<template>
	<el-tooltip class="box-item" effect="dark" :content="descFormat" placement="bottom" width="200px">
		<div
			class="resource-card-com w-full h-[85px] bg-white shadow-md rounded-xl hover:shadow-xl overflow-hidden px-3 border">
			<div class="res-info flex items-center justify-between h-[75%]">
				<div class="res-icon h-full flex justify-center items-center">
					<nuxt-img width="32px" :src="icon" />
				</div>
				<div class="res-name-desc">
					<div class="res-name w-full">
						<p class="w-full font-bold text-sm truncate text-gray-700">{{ name }}</p>
					</div>
					<div class="res-desc w-full">
						<p class="w-full text-gray-500 text-xs truncate">{{ desc }}</p>
					</div>
				</div>
			</div>
			<div class="res-sub-info border-t flex items-center justify-between h-[25%]">
				<div class="visit-count flex items-center w-1/2">
					<icon name="weui:eyes-on-outlined" :size="16" class="text-gray-500" title="访问量" />
					<span class="text-xs text-gray-500" title="访问量">{{ visitCount }}</span>
				</div>
				<div class="go-to flex items-center justify-end w-1/2">
					<nuxt-link :to="url" target="_blank" class="flex items-center justify-center">
						<icon
							:size="18"
							title="立即前往"
							class="text-gray-500 mr-[-5px]"
							name="material-symbols-light:chevron-right" />
					</nuxt-link>
				</div>
			</div>
		</div>
	</el-tooltip>
</template>

<script lang="ts">
export default defineComponent({
	name: 'ResourceCard',
	props: {
		name: {
			type: String,
			default: '',
		},
		desc: {
			type: String,
			default: '',
		},
		icon: {
			type: String,
			default: '',
		},
		url: {
			type: String,
			default: '',
		},
		visitCount: {
			type: Number,
			default: 0,
		},
	},
	setup(props) {
		const descFormat = computed(() => {
			if (props.desc.length >= 50) {
				return `${props.desc.slice(0, 50)}...`;
			}
			return props.desc;
		});

		return {
			descFormat,
		};
	},
});
</script>

<style lang="scss" scoped>
.resource-card-com {
	cursor: pointer;
	transition: all 0.3s;

	&:hover {
		transform: translateY(-10px);
	}

	.res-name-desc {
		width: calc(100% - 40px);
	}
}
</style>
